web版的聊天室对与前端来说真的是一个头疼的问题，特别是输入框显示表情，需要contentEditable属性来显示，但是contentEditable又有光标问题，插入的表情无法在光标下插入，会自动跳到最前面，还有就是输入框打开时，光标总是跳到最前面，下面是两个方法解决表情输入到光标下和自动跳到文本最后面

1、在光标后输入   //下面是vue-cli中的代码

function selectImg (item) {       let Img = ``  // img是要插入的图片表情       let obj = this.$refs.emoji   // obj 是可编辑的div       let range, node       if (!obj.hasfocus) {         obj.focus()       }       if (window.getSelection && window.getSelection().getRangeAt) {         range = window.getSelection().getRangeAt(0)         range.collapse(false)         node = range.createContextualFragment(Img)         let c = node.lastChild         range.insertNode(node)         if (c) {           range.setEndAfter(c)           range.setStartAfter(c)         }         let j = window.getSelection()         j.removeAllRanges()         j.addRange(range)       } else if (document.selection && document.selection.createRange) {         document.selection.createRange().pasteHTML(Img)       }     }

2、把光标设置在文本最后

keepLastIndex (obj) {   // obj 为可编辑 的div  移动端的就没做低版本的兼容   if (window.getSelection) {     let range = window.getSelection()// 创建range     range.selectAllChildren(obj)// range 选择obj下所有子内容     range.collapseToEnd()// 光标移至最后   } }